<template>
  <!-- 修改手机号 -->
  <div class="divBox">
    <el-card class="box-card" style="position:relative;">
      <div :style="$cssStyle.headLine">
        {{ this.$route.meta.title }}
      </div>
      <!-- 表单 -->
      <div class="contain" style="margin: 0 auto;height=1000px">
        <el-form label-width="100px">
          <el-form-item label="手机号"
            prop="mobile"
          >
            <el-input v-model="formDate.mobile"
              placeholder="请输入要绑定的手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <router-link :to="{path: '/user/edit/changepassword'}">
              <el-button class="nextstep">下一步</el-button>
            </router-link>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单 -->
    </el-card>
  </div>
  <!-- 修改手机号 -->
</template>

<script>
export default {
  data(){
    return{
      formDate: {
        mobile: '',
        verificationCode: ''
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.contain {
  padding-top:100px;
  z-index: 9999;
  width: 400px;
  height: 1000px;
  // margin: 0 auto;
  // position: absolute;
  top: 50%;
  left: 50%;
  // transform: translate(-50%, -50%);
//   <<<.el-form {
    .el-form-item:nth-child(2) {
      .el-form-item__content {
        .el-input {
          width: 50%;
          margin-right: 35px;
        }
        .el-button {
        background-color: #b3b3b3;
        color: #fff;
        }
      }
    }
//  }
//  <<<.el-form-item {
//   .el-form-item__content {

//   }
//  }
}
>>>.nextstep {
    width: 30%;
    color: #fff;
    background-color: #feda62;
    margin: 100px 0 0 20%;
    border: 0px solid #feda62;
}
</style>